<template>
    <view>
        <!-- 搜索框 -->
        <input type="text" v-model="searchKeyword" placeholder="请输入搜索关键词" @input="getSuggestions"
               style="margin: 10px; padding: 10px; border: 1px solid #ccc; width: calc(100% - 20px);" />
        <!-- 提示列表 -->
        <view v-if="suggestions.length > 0" class="suggestion-list">
            <view v-for="(suggestion, index) in suggestions" :key="index" @click="selectSuggestion(suggestion)">
                {{ suggestion.title }}
            </view>
        </view>
        <!-- 路线规划按钮 -->
        <view class="route-buttons">
            <button @click="planDrivingRoute">驾车路线</button>
            <button @click="planBikingRoute">骑车路线</button>
            <button @click="planTransitRoute">步行路线</button>
        </view>
        <map style="height: calc(100vh - 120px); width: 100vw;" :latitude="latitude" :longitude="longitude" :scale="scale"
             :markers="markers" :polyline="polyline"></map>
    </view>
</template>

<script>
// 引入腾讯地图 SDK
import QQMapWX from "@/pages/utils/qqmap-wx-jssdk.js";
import { debounce } from 'lodash';

export default {
    data() {
        return {
            latitude: 39.9042, // 地图初始纬度
            longitude: 116.4074, // 地图初始经度
            scale: 17, // 地图缩放级别
            markers: [], // 地图标记点
            key: "I3FBZ-2KILT-FRXXE-VLDLV-DGSQ7-VXFH2", // 腾讯地图密钥
            qqmapsdk: '', // 腾讯地图实例
            searchKeyword: '', // 搜索关键词
            startPoint: null, // 起点坐标
            endPoint: null, // 终点坐标
            polyline: [{ 
                points: [],
                color: '#FF0000', // 路线颜色
                width: 5, // 路线宽度，确保为数字类型
                dottedLine: false // 是否为虚线
            }],
            suggestions: [] // 搜索提示列表
        };
    },
    onLoad() {
        this.getLocationInfo(); // 获取用户位置
        this.mapInit(); // 初始化地图
    },
    methods: {
        // 初始化腾讯地图
        mapInit() {
            this.qqmapsdk = new QQMapWX({
                key: this.key
            });
        },

        // 获取用户位置
        getLocationInfo() {
            const _this = this;
            uni.getLocation({
                type: 'gcj02',
                isHighAccuracy: true,
                success: (res) => {
                    const lat = res.latitude;
                    const lng = res.longitude;
                    // 检查经纬度是否有效
                    if (lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180) {
                        _this.latitude = lat;
                        _this.longitude = lng;
                        _this.startPoint = [lat, lng]; // 设置起点
                        _this.markers = [{
                            id: 1,
                            latitude: lat,
                            longitude: lng,
                            title: '当前位置',
                            width: 30,
                            height: 50
                        }];
                    } else {
                        console.error('获取的经纬度无效', lat, lng);
                        uni.showToast({
                            title: '获取位置失败',
                            icon: 'none'
                        });
                    }
                },
                fail: (err) => {
                    console.error('获取位置失败', err);
                    uni.showToast({
                        title: '获取位置失败',
                        icon: 'none'
                    });
                }
            });
        },

        // 获取搜索提示
        getSuggestions() {
            if (this.searchKeyword) {
                this.qqmapsdk.getSuggestion({
                    keyword: this.searchKeyword,
                    success: (res) => {
                        if (Array.isArray(res.data) && res.data.length > 0) {
                            this.suggestions = res.data;
                        } else {
                            this.suggestions = [];
                        }
                    },
                    fail: (err) => {
                        console.error('搜索提示失败', err);
                    }
                });
            } else {
                this.suggestions = [];
            }
        },

        // 选择提示
        selectSuggestion(suggestion) {
            this.searchKeyword = suggestion.title;
            this.suggestions = [];
            const lat = suggestion.location.lat;
            const lng = suggestion.location.lng;
            // 检查经纬度是否有效
            if (lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180) {
                this.latitude = lat;
                this.longitude = lng;
                this.endPoint = [lat, lng]; // 设置终点
                this.markers = [
                    {
                        id: 1,
                        latitude: this.startPoint[0],
                        longitude: this.startPoint[1],
                        title: '当前位置',
                        width: 30,
                        height: 50
                    },
                    {
                        id: 2,
                        latitude: lat,
                        longitude: lng,
                        title: suggestion.title,
                        width: 30,
                        height: 50
                    }
                ];
                // 清空路线
                this.polyline[0].points = [];
            } else {
                console.error('返回的经纬度无效', lat, lng);
                uni.showToast({
                    title: '返回的经纬度无效',
                    icon: 'none'
                });
            }
        },

        // 通用路线规划方法
        getRoute(mode) {
            const _this = this;
            if (_this.startPoint && _this.endPoint) {
                _this.qqmapsdk.direction({
                    mode: mode,
                    from: `${_this.startPoint[0]},${_this.startPoint[1]}`,
                    to: `${_this.endPoint[0]},${_this.endPoint[1]}`,
                    success: function (res) {
                        console.log(res);
                        const ret = res;
                        if (ret.result && ret.result.routes && ret.result.routes.length > 0) {
                            const coors = ret.result.routes[0].polyline, pl = [];
                            // 坐标解压（返回的点串坐标，通过前向差分进行压缩）
                            const kr = 1000000;
                            for (let i = 2; i < coors.length; i++) {
                                coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
                            }
                            // 将解压后的坐标放入点串数组pl中
                            for (let i = 0; i < coors.length; i += 2) {
                                pl.push({ latitude: coors[i], longitude: coors[i + 1] });
                            }
                            console.log(pl);
                            // 设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
                            _this.polyline[0].points = pl;
                        } else {
                            console.error('未获取到有效路线数据', ret);
                            uni.showToast({
                                title: '未获取到有效路线数据',
                                icon: 'none'
                            });
                        }
                    },
                    fail: function (error) {
                        console.error(error);
                    },
                    complete: function (res) {
                        console.log(res);
                    }
                });
            } else {
                uni.showToast({
                    title: '请先定位起点和终点',
                    icon: 'none'
                });
            }
        },

        // 驾车路线规划
        planDrivingRoute() {
            this.getRoute('driving');
        },

        // 骑车路线规划
        planBikingRoute() {
            this.getRoute('bicycling');
        },

        // 公交路线规划
        planTransitRoute() {
            this.getRoute('transit');
        }
    }
};
</script>

<style scoped>
.suggestion-list {
    margin: 0 10px;
    border: 1px solid #ccc;
    border-top: none;
    background-color: #fff;
}

.suggestion-list view {
    padding: 10px;
    cursor: pointer;
}

.suggestion-list view:hover {
    background-color: #f0f0f0;
}

.route-buttons {
    display: flex; /* 使用 flex 布局 */
    justify-content: space-around; /* 平均分布按钮 */
    margin: 10px;
}

.route-buttons button {
    flex: 1; /* 让按钮平均分配宽度 */
    margin: 0 5px; /* 给按钮添加左右间距 */
}
</style>